<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="author" content="lijun; 67086071; zwlijun@qq.com" />
<title>RIA Client API - BY 小网</title>
<link href="css/api.css" type="text/css" rel="stylesheet" />
</head>

<body>
  <ins>此文档用于描述在FireFox下兼容Internet Explorer下的属性和方法</ins>
  <div class="nav">
    <a href="#event">event</a>
    <a href="#returnValue">returnValue</a>
    <a href="#cancelBubble">cancelBubble</a>
    <a href="#clientX">clientX</a>
    <a href="#clientY">clientY</a>
    <a href="#keyCode">keyCode</a>
    <a href="#button">button</a>
    <a href="#srcElement">srcElement</a>
    <a href="#offsetX">offsetX</a>
    <a href="#offsetY">offsetY</a>
    <a href="#attachEvent">attachEvent()</a>
    <a href="#detachEvent">detachEvent()</a>
    <a href="#addRule">addRule()</a>
    <a href="#removeRule">removeRule()</a>
  </div>
  <table width="600" cellspacing="1" cellpadding="1" border="0">
    <tbody>
      <tr>
        <th colspan="2">event属性<a name="event"></a></th>
      </tr>
      <tr>
        <td class="label">作&nbsp;&nbsp;&nbsp;用</td>
        <td>事件处理</td>
      </tr>
      <tr>
        <td class="label">基本语法</td>
        <td>var evt = window.event;</td>
      </tr>
      <tr>
        <td class="label">说&nbsp;&nbsp;&nbsp;明</td>
        <td>实现ie下的window.event方式引用event对象</td>
      </tr>
      <tr>
        <td class="label">示&nbsp;&nbsp;&nbsp;例</td>
        <td>
<pre>
function doClick(){
  var e = window.event;
  //todo;
}
document.body.onclick = doClick;
</pre>
        </td>
      </tr>
    </tbody>
  </table>
  <table width="600" cellspacing="1" cellpadding="1" border="0">
    <tbody>
      <tr>
        <th colspan="2">returnValue属性<a name="returnValue"></a></th>
      </tr>
      <tr>
        <td class="label">作&nbsp;&nbsp;&nbsp;用</td>
        <td>阻止浏览器执行与事件相关的默认动作</td>
      </tr>
      <tr>
        <td class="label">基本语法</td>
        <td>window.event.returnValue = bValue;</td>
      </tr>
      <tr>
        <td class="label">说&nbsp;&nbsp;&nbsp;明</td>
        <td>布尔属性，为flash时阻止浏览器执行与事件相关的默认动作，等价于原FF下的preventDefault()方法</td>
      </tr>
      <tr>
        <td class="label">示&nbsp;&nbsp;&nbsp;例</td>
        <td>
<pre>
function doClick(){
  var e = window.event;
  e.returnValue = false;
  //todo;
}
document.body.onclick = doClick;
</pre>
        </td>
      </tr>
    </tbody>
  </table>
  <table width="600" cellspacing="1" cellpadding="1" border="0">
    <tbody>
      <tr>
        <th colspan="2">cancelBubble属性<a name="cancelBubble"></a></th>
      </tr>
      <tr>
        <td class="label">作&nbsp;&nbsp;&nbsp;用</td>
        <td>阻止事件冒泡</td>
      </tr>
      <tr>
        <td class="label">基本语法</td>
        <td>window.event.cancelBubble = bValue;</td>
      </tr>
      <tr>
        <td class="label">说&nbsp;&nbsp;&nbsp;明</td>
        <td>布尔属性，为true时阻止当前事件进一步起泡到包容层次的元素，等价于原FF下的stopPropagration()方法</td>
      </tr>
      <tr>
        <td class="label">示&nbsp;&nbsp;&nbsp;例</td>
        <td>
<pre>
function doClick(){
  var e = window.event;
  e.cancelBubbile = true;
  //todo;
}
document.body.onclick = doClick;
</pre>
        </td>
      </tr>
    </tbody>
  </table>
  <table width="600" cellspacing="1" cellpadding="1" border="0">
    <tbody>
      <tr>
        <th colspan="2">clientX属性<a name="clinetX"></a></th>
      </tr>
      <tr>
        <td class="label">作&nbsp;&nbsp;&nbsp;用</td>
        <td>获取事件发生的x坐标</td>
      </tr>
      <tr>
        <td class="label">基本语法</td>
        <td>var _x = window.event.clientX;</td>
      </tr>
      <tr>
        <td class="label">说&nbsp;&nbsp;&nbsp;明</td>
        <td>获取事件发生的x坐标，对应FF下的pageX属性</td>
      </tr>
      <tr>
        <td class="label">示&nbsp;&nbsp;&nbsp;例</td>
        <td>
<pre>
function doClick(){
  var e = window.event;
  var x = e.clientX;
  //todo;
}
document.body.onclick = doClick;
</pre>
        </td>
      </tr>
    </tbody>
  </table>
  <table width="600" cellspacing="1" cellpadding="1" border="0">
    <tbody>
      <tr>
        <th colspan="2">clientY属性<a name="clinetY"></a></th>
      </tr>
      <tr>
        <td class="label">作&nbsp;&nbsp;&nbsp;用</td>
        <td>获取事件发生的y坐标</td>
      </tr>
      <tr>
        <td class="label">基本语法</td>
        <td>var _y = window.event.clientY;</td>
      </tr>
      <tr>
        <td class="label">说&nbsp;&nbsp;&nbsp;明</td>
        <td>获取事件发生的y坐标，对应FF下的pageY属性</td>
      </tr>
      <tr>
        <td class="label">示&nbsp;&nbsp;&nbsp;例</td>
        <td>
<pre>
function doClick(){
  var e = window.event;
  var y = e.clientY;
  //todo;
}
document.body.onclick = doClick;
</pre>
        </td>
      </tr>
    </tbody>
  </table>
  <table width="600" cellspacing="1" cellpadding="1" border="0">
    <tbody>
      <tr>
        <th colspan="2">keyCode属性<a name="keyCode"></a></th>
      </tr>
      <tr>
        <td class="label">作&nbsp;&nbsp;&nbsp;用</td>
        <td>获取键盘按键代码</td>
      </tr>
      <tr>
        <td class="label">基本语法</td>
        <td>var key = window.event.keyCode;</td>
      </tr>
      <tr>
        <td class="label">说&nbsp;&nbsp;&nbsp;明</td>
        <td>获取键盘按键代码，对应FF下的which属性</td>
      </tr>
      <tr>
        <td class="label">示&nbsp;&nbsp;&nbsp;例</td>
        <td>
<pre>
function doKeypress(){
  var e = window.event;
  var key = e.keyCode;
  //todo;
}
document.body.onkeypress = doKeypress;
</pre>
        </td>
      </tr>
    </tbody>
  </table>
  <table width="600" cellspacing="1" cellpadding="1" border="0">
    <tbody>
      <tr>
        <th colspan="2">button属性<a name="button"></a></th>
      </tr>
      <tr>
        <td class="label">作&nbsp;&nbsp;&nbsp;用</td>
        <td>获取鼠标键</td>
      </tr>
      <tr>
        <td class="label">基本语法</td>
        <td>var button = window.event.button;</td>
      </tr>
      <tr>
        <td class="label">说&nbsp;&nbsp;&nbsp;明</td>
        <td>获取鼠标键，对应FF下的which属性</td>
      </tr>
      <tr>
        <td class="label">示&nbsp;&nbsp;&nbsp;例</td>
        <td>
<pre>
function doClick(){
  var e = window.event;
  var key = e.button;
  //todo;
}
document.body.onclick = doClick;
</pre>
        </td>
      </tr>
    </tbody>
  </table>
  <table width="600" cellspacing="1" cellpadding="1" border="0">
    <tbody>
      <tr>
        <th colspan="2">srcElement属性<a name="srcElement"></a></th>
      </tr>
      <tr>
        <td class="label">作&nbsp;&nbsp;&nbsp;用</td>
        <td>获取事件源对象</td>
      </tr>
      <tr>
        <td class="label">基本语法</td>
        <td>var src = window.event.srcElement;</td>
      </tr>
      <tr>
        <td class="label">说&nbsp;&nbsp;&nbsp;明</td>
        <td>获取事件源对象，对应FF下的target属性</td>
      </tr>
      <tr>
        <td class="label">示&nbsp;&nbsp;&nbsp;例</td>
        <td>
<pre>
function doClick(){
  var e = window.event;
  var src = e.srcElement;
  //todo;
}
document.body.onclick = doClick;
</pre>
        </td>
      </tr>
    </tbody>
  </table>
  <table width="600" cellspacing="1" cellpadding="1" border="0">
    <tbody>
      <tr>
        <th colspan="2">offsetX属性<a name="offsetX"></a></th>
      </tr>
      <tr>
        <td class="label">作&nbsp;&nbsp;&nbsp;用</td>
        <td>获取鼠标指针相对于源元素的x坐标</td>
      </tr>
      <tr>
        <td class="label">基本语法</td>
        <td>var offsetX = window.event.offsetX;</td>
      </tr>
      <tr>
        <td class="label">说&nbsp;&nbsp;&nbsp;明</td>
        <td>获取鼠标指针相对于源元素的x坐标，对应FF下的layerX属性</td>
      </tr>
      <tr>
        <td class="label">示&nbsp;&nbsp;&nbsp;例</td>
        <td>
<pre>
function doClick(){
  var e = window.event;
  var _x = e.offsetX;
  //todo;
}
document.body.onclick = doClick;
</pre>
        </td>
      </tr>
    </tbody>
  </table>
  <table width="600" cellspacing="1" cellpadding="1" border="0">
    <tbody>
      <tr>
        <th colspan="2">offsetY属性<a name="offsetY"></a></th>
      </tr>
      <tr>
        <td class="label">作&nbsp;&nbsp;&nbsp;用</td>
        <td>获取鼠标指针相对于源元素的y坐标</td>
      </tr>
      <tr>
        <td class="label">基本语法</td>
        <td>var offsetY = window.event.offsetY;</td>
      </tr>
      <tr>
        <td class="label">说&nbsp;&nbsp;&nbsp;明</td>
        <td>获取鼠标指针相对于源元素的y坐标，对应FF下的layerY属性</td>
      </tr>
      <tr>
        <td class="label">示&nbsp;&nbsp;&nbsp;例</td>
        <td>
<pre>
function doClick(){
  var e = window.event;
  var y = e.offsetY;
  //todo;
}
document.body.onclick = doClick;
</pre>
        </td>
      </tr>
    </tbody>
  </table>
  <table width="600" cellspacing="1" cellpadding="1" border="0">
    <tbody>
      <tr>
        <th colspan="2">attachEvent方法<a name="attachEvent"></a></th>
      </tr>
      <tr>
        <td class="label">作&nbsp;&nbsp;&nbsp;用</td>
        <td>添加一个事件监听</td>
      </tr>
      <tr>
        <td class="label">基本语法</td>
        <td>obj.attachEvent(type, handler);</td>
      </tr>
      <tr>
        <td class="label">说&nbsp;&nbsp;&nbsp;明</td>
        <td>添加事件监听，对应FF下的addEventListener()方法</td>
      </tr>
      <tr>
        <td class="label">示&nbsp;&nbsp;&nbsp;例</td>
        <td>
<pre>
function doClick(){
  var e = window.event;
  var y = e.offsetY;
  //todo;
}
document.body.attachEvent("onclick", doClick);
</pre>
        </td>
      </tr>
    </tbody>
  </table>
  <table width="600" cellspacing="1" cellpadding="1" border="0">
    <tbody>
      <tr>
        <th colspan="2">detachEvent方法<a name="detachEvent"></a></th>
      </tr>
      <tr>
        <td class="label">作&nbsp;&nbsp;&nbsp;用</td>
        <td>移除一个事件监听</td>
      </tr>
      <tr>
        <td class="label">基本语法</td>
        <td>obj.detachEvent(type, handler);</td>
      </tr>
      <tr>
        <td class="label">说&nbsp;&nbsp;&nbsp;明</td>
        <td>添加事件监听，对应FF下的removeEventListener()方法</td>
      </tr>
      <tr>
        <td class="label">示&nbsp;&nbsp;&nbsp;例</td>
        <td>
<pre>
function doClick(){
  var e = window.event;
  var y = e.offsetY;
  //todo;
}
document.body.detachEvent("onclick", doClick);
</pre>
        </td>
      </tr>
    </tbody>
  </table>
  <table width="600" cellspacing="1" cellpadding="1" border="0">
    <tbody>
      <tr>
        <th colspan="2">addRule方法<a name="addRule"></a></th>
      </tr>
      <tr>
        <td class="label">作&nbsp;&nbsp;&nbsp;用</td>
        <td>添加一条css规则</td>
      </tr>
      <tr>
        <td class="label">基本语法</td>
        <td>sheet.addRule(selector, rule, index);</td>
      </tr>
      <tr>
        <td class="label">说&nbsp;&nbsp;&nbsp;明</td>
        <td>添加一条css规则，对应FF下的insertRule()方法</td>
      </tr>
      <tr>
        <td class="label">示&nbsp;&nbsp;&nbsp;例</td>
        <td>
<pre>
var style = document.getElementsByTagName("style")[0];
style.sheet.addRule("body", "margin:0; padding:0", 0);
</pre>
        </td>
      </tr>
    </tbody>
  </table>
  <table width="600" cellspacing="1" cellpadding="1" border="0">
    <tbody>
      <tr>
        <th colspan="2">removeRule方法<a name="removeRule"></a></th>
      </tr>
      <tr>
        <td class="label">作&nbsp;&nbsp;&nbsp;用</td>
        <td>删除一条css规则</td>
      </tr>
      <tr>
        <td class="label">基本语法</td>
        <td>sheet.removeRule(index);</td>
      </tr>
      <tr>
        <td class="label">说&nbsp;&nbsp;&nbsp;明</td>
        <td>删除一条css规则，对应FF下的deleteRule()方法</td>
      </tr>
      <tr>
        <td class="label">示&nbsp;&nbsp;&nbsp;例</td>
        <td>
<pre>
var style = document.getElementsByTagName("style")[0];
style.sheet.removeRule(0);
</pre>
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>
